<template>
  <div class="pagination-container">
    <el-pagination
      :currentPage="currentPage"
      :page-size="pageSize"
      :total="total"
      background
      :page-sizes="[10, 20, 50, 100]"
      layout="total, prev, pager, next"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script  setup>
import { ref } from 'vue';

const props = defineProps({
  total: {
    type: Number,
    required: true,
    default:1000
  },
  currentPage: {
    type: Number,
    default: 1
  },
  pageSize: {
    type: Number,
    default: 10
  }
});

const emit = defineEmits(['size-change', 'current-change']);

const handleSizeChange = (newSize) => {
  emit('size-change', newSize);
};

const handleCurrentChange = (newPage) => {
  emit('current-change', newPage);
};
</script>

<style scoped>
.is-active {
  background-color:#126983 !important;
}

.pagination-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>